/**
 * Created by GYL on 2018/7/25
 */
import React, { Component } from 'react';
import { Carousel, Col, Divider, Slider, Icon, DatePicker } from 'antd';
import style from './Cockpit.less';
import request from '../../utils/request';
import VideoPlayer from '../../components/VideoPlayer';

class Cockpit_Video extends Component {

    constructor(props) {
        super(props)
        this.state = {

            carDropDown: [],
            videoAddress: [],
            spArr: [
                {
                    name:'场地东南侧',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_1'
                },
                {
                    name:'水处理东侧',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_2'
                },
                {
                    name:'清水池',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_3'
                },
                {
                    name:'场地西南侧',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_4'
                },
                {
                    name:'大门枪机',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_5'
                },
                {
                    name:'项目部球机',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_6'
                },
                {
                    name:'硫酸储罐',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_7'
                },
                {
                    name:'场地西北侧',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_8'
                },
                {
                    name:'水处理',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_9'
                },
                {
                    name:'水处理2',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_10'
                },
                {
                    name:'东侧大门',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_11'
                },
                {
                    name:'污水池',
                    url:'rtmp://25f704r520.zicp.vip:58487/hls/stream_12'
                },
            ],
          
        }

    }


  

    render() {
       
        return (
            //视频视图
                <div className={style.spTB} style={{ flex: 1, marginTop: "5%" }}>
                    {
                        this.state.spArr.map((item) => {
                            return (
                                <div className={style.spBox}>
                                    <p className={style.Title} style={{ fontFamily: "wd", fontWeight: 900}}> <Icon type="double-right" color="#70D7FF" /> 点位名称 : <span style={{ color: '#fff' }}>{item.name}</span> </p>
                                    <div style={{ flex: 1, padding: 10, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
                                        <VideoPlayer
                                            width={'42vh'}
                                            height={150}
                                            autoplay={true}
                                            controls={true}
                                            notSupportedMessage={'您的浏览器没有安装或开启Flash,请检查！'}
                                            techOrder={["html5", "flash"]}
                                            sources={[{ src: item.url, type: 'rtmp/flv' }]}
                                        />
                                    </div>
                                </div>
                            )
                        })
                    }


                </div>
         


        )
    }
}
export default (Cockpit_Video);
